<!--
 * @Description: 
 * @Author: sanghx
 * @Date: 2020-07-08 10:11:52
 * @LastEditors: sanghx
 * @LastEditTime: 2020-07-09 17:10:29
--> 
<template>
  <div ref="bar" class="chartsdom"></div>
</template>

<script>
export default {
  name: "TwoWayBar",
  props: ["echartData"],
  mounted() {
    let option = {
      color: ["#019CFF", "#33C74D", "#F7E71B", "#19D6EC"],
      legend: {
        right: 10,
        textStyle: {
          fontSize: 16,
          color: "#fff"
        }
      },
      grid: [
        {
          show: false,
          left: 50,
          top: 46,
          bottom: 50,
          containLabel: true,
          width: 142
        },
        {
          show: false,
          left: "52%",
          top: 46,
          bottom: "14%",
          width: "0%"
        },
        {
          show: false,
          right: 50,
          top: 46,
          bottom: 50,
          containLabel: true,
          width: 142
        }
      ],
      xAxis: [
        {
          type: "value",
          inverse: true,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false,
            inside: true
          }
        },
        {
          gridIndex: 1
        },
        {
          gridIndex: 2,
          type: "value",
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "category",
          inverse: true,
          position: "right",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        {
          gridIndex: 1,
          type: "category",
          componentType: "1",
          position: "left",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: true,
            margin: -60,
            textStyle: {
              color: "#fff",
              fontSize: 14
            }
          },
          data: this.echartData.map(item => item.name)
        },
        {
          gridIndex: 2,
          type: "category",
          inverse: true,
          position: "left",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        }
      ],
      series: [
        {
          name: "forks",
          type: "bar",
          barWidth: 14,
          label: {
            show: true,
            position: "left",
            textStyle: {
              color: "#fff",
              fontSize: 16
            }
          },
          itemStyle: {
            normal: {
              barBorderRadius: [30, 0, 0, 30]
            }
          },
          data: this.echartData.map(item => item.forks)
        },
        {
          name: "star",
          type: "bar",
          barWidth: 14,
          xAxisIndex: 2,
          yAxisIndex: 2,
          label: {
            show: true,
            position: "right",
            textStyle: {
              color: "#fff",
              fontSize: 16
            }
          },
          itemStyle: {
            normal: {
              barBorderRadius: [0, 30, 30, 0]
            }
          },
          data: this.echartData.map(item => item.star)
        }
      ]
    };

    this.getEchart(option);
  },
  methods: {
    getEchart(option) {
      let myChart = this.$echarts.init(this.$refs.bar);
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.chartsdom {
  width: 100%;
  min-height: 26rem;
}
</style>